<!--
 * @Author: your name
 * @Date: 2020-12-16 10:08:47
 * @LastEditTime: 2020-12-18 09:51:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \uniapp-ts-uview\src\pages\index\components\activity.vue
-->

<template>
  <view class="all">
    <view class="section">
      <u-section
        title="近期活动"
        sub-title="更多"
        font-size="30"
        :show-line="show_line"
      ></u-section>
    </view>
    <view class="activity">
      <image
        src="https://cdn.uviewui.com/uview/swiper/2.jpg"
        class="img"
        lazy-load
        mode="aspectFill"
      ></image>
      <view class="title">
        <u-tag
          text="报名中"
          type="error"
          mode="dark"
          size="mini"
          shape="circle"
        />
        <text>第七期实体店社群实战营(场地费)</text>
      </view>
      <view class="content">
        <view class="content_item">
          <text>10.3</text>
          <text>时间</text>
        </view>
        <view class="content_item">
          <text>福田区</text>
          <text>地点</text>
        </view>
        <view class="content_item">
          <text>￥99</text>
          <text>费用</text>
        </view>
        <view class="content_item_proprss" style="border-right: none">
          <u-circle-progress
            active-color="#e53f4c"
            :percent="50"
            width="80"
            border-width="3"
          >
            <view class="u-progress-content">
              <text class="u-progress-info">18/100</text>
            </view>
          </u-circle-progress>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
@Component({ name: "quickenter" })
export default class extends Vue {
  @Prop({ type: Boolean }) private show_line!: Boolean;
 
}
</script>

<style lang="scss" scoped>
.all {
  display: flex;
  flex-direction: column;
  .section {
    width: 100%;
    height: 65upx;
    line-height: 65upx;
    box-sizing: border-box;
    padding: 0upx 40upx;
  }
  .activity {
    width: auto;
    height: 420upx;
    margin: 0upx 20upx;
    background: #ffffff;
    border-radius: 10upx;
    .img {
      width: 670upx;
      height: 220upx;
      margin: 20upx 20upx 10upx 20upx;
    }
    .title {
      width: 100%;
      box-sizing: border-box;
      padding: 0upx 23upx;
      display: flex;
      flex-direction: row;
      text {
        font-family: HiraginoSansGB-W3;
        font-size: 32rpx;
        margin-left: 30upx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 81%;
      }
    }
    .content {
      margin-top: 15upx;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      .content_item {
        width: 25%;
        height: 70upx;
        border-right: 1px solid black;
        border-color: #b3b3b3;
        display: flex;
        flex-direction: column;
        :nth-child(odd) {
          color: red;
        }
        :nth-child(even) {
          margin-top: 2%;
        }
        text {
          display: flex;
          justify-content: center;
          font-size: 24upx;
        }
      }
      .content_item_proprss {
        width: 25%;
        height: 70upx;
        display: flex;
        justify-content: center;
        .u-progress-info{
            font-size: 18upx;
        }
      }
    }
  }
}
</style>